<template>
  <div>
    <gallery :images="images" :index="index" @close="index = null" :id="fileId"></gallery>
    <div
      class="image"
      v-for="(image, imageIndex) in images"
      :key="imageIndex"
      @click="index = imageIndex"
      :style="{ backgroundImage: 'url(' + image.thumbnail + ')', width: '80px', height: '90px' }"
    ></div>
  </div>
</template>

<script>
  import VueGallery from 'vue-gallery';
  import defaultPic from '@/assets/customer/spbf.svg'
  export default {
    props: {
      value: [String, Object, Array],
      // 图片张数
      fileSize: {
        type: Number,
        default: 2,
      },
      fileId:{
        type: String,
        default: 'blueimp-gallery',
      }
    },
    data: function () {
      return {
        images: [],
        index: null
      };
    },
    watch: {
      value: {
        handler(val) {
          this.images = [];
          if (val === null || typeof val === 'undefined' || val.length === 0 ){
            this.images = [];
          }else{
            val.map(item=>{
              if(item.fileSuffix === 'mp4' || item.fileSuffix === 'video'){
                this.images.push({title:'视频',type:'video/mp4',href:item.previewFileUrl,thumbnail:defaultPic});
              }else{
                var picType = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff']
                if(picType.indexOf(item.fileSuffix.toLowerCase()) !== -1){
                  this.images.push({title:'图片',type:'image/jpeg',href:item.previewFileUrl,thumbnail:item.previewFileUrl});
                }
              }
            });
          }
        },
        deep: true,
        immediate: true
      }
    },
    components: {
      'gallery': VueGallery
    },
  }
</script>

<style scoped>
  .image {
    float: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border: 1px solid #ebebeb;
    margin: 5px;
  }
</style>
